<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepClaude 模型配置管理</title>
    <link rel="stylesheet" href="/static/css/styles.css">
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body class="animate-fade-in">
    <!-- 授权页面 -->
    <div id="auth-page" class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card auth-card">
                    <div class="card-header bg-primary text-white">
                        <h4 class="mb-0"><i class="bi bi-shield-lock me-2"></i>DeepClaude 模型配置管理 - 授权</h4>
                    </div>
                    <div class="card-body">
                        <form id="auth-form">
                            <div class="mb-3">
                                <label for="api-key" class="form-label">API Key</label>
                                <input type="password" class="form-control" id="api-key" placeholder="请输入您的 API Key">
                                <div class="form-text">默认 api key 为 123456，远程部署请在登录后在"系统设置"内尽快修改</div>
                            </div>
                            <div id="auth-error" class="alert alert-danger d-none" role="alert">
                                API Key 无效，请重新输入
                            </div>
                            <button type="submit" class="btn btn-primary w-100"><i class="bi bi-key me-2"></i>验证</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 配置页面 -->
    <div id="config-page" class="container-fluid mt-3 d-none">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" href="#"><i class="bi bi-cpu me-2"></i>DeepClaude 模型配置管理</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link active" href="#composite-models" data-bs-toggle="tab"><i class="bi bi-diagram-3 me-1"></i> 组合模型</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#reasoner-models" data-bs-toggle="tab"><i class="bi bi-braces me-1"></i> 推理模型</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#target-models" data-bs-toggle="tab"><i class="bi bi-bullseye me-1"></i> 目标模型</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#proxy-settings" data-bs-toggle="tab"><i class="bi bi-globe me-1"></i> 代理设置</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#system-settings" data-bs-toggle="tab"><i class="bi bi-gear me-1"></i> 系统设置</a>
                        </li>
                    </ul>
                    <div class="d-flex">
                        <button id="export-config-btn" class="btn btn-outline-light me-2"><i class="bi bi-download me-1"></i> 导出配置</button>
                        <button id="import-config-btn" class="btn btn-outline-light me-2"><i class="bi bi-upload me-1"></i> 导入配置</button>
                        <button id="save-all-btn" class="btn btn-success me-2"><i class="bi bi-save me-1"></i> 保存所有配置</button>
                        <button id="logout-btn" class="btn btn-outline-light"><i class="bi bi-box-arrow-right me-1"></i> 退出</button>
                    </div>
                </div>
            </div>
        </nav>

        <div class="tab-content mt-3">
            <!-- 组合模型配置 -->
            <div class="tab-pane fade show active" id="composite-models">
                <div class="container">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h2 class="fs-4">组合模型配置</h2>
                        <button id="add-composite-model-btn" class="btn btn-primary">
                            <i class="bi bi-plus-circle"></i> 添加组合模型
                        </button>
                    </div>
                    <p class="text-muted mb-3">组合模型可以将推理模型与目标模型结合使用，发挥各自优势。</p>
                    <div id="composite-models-container" class="row">
                        <!-- 组合模型卡片将在这里动态生成 -->
                    </div>
                    <!-- 广告卡片 -->
                    <div class="card mb-4">
                        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">无需自己配置，可直接购买 API</h5>
                        </div>
                        <div class="card-body">
                            <p>支持最新 Claude 4 模型、DeepClaude、DeepGemini（目前社区反馈最好）、ChatGPT 系列模型等，支持知识库使用。</p>
                            <a href="https://erlich.fun/deepclaude-pricing" class="btn btn-primary">
                                <i class="bi bi-cart me-1"></i> 立即购买
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 推理模型配置 -->
            <div class="tab-pane fade" id="reasoner-models">
                <div class="container">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h2 class="fs-4">推理模型配置</h2>
                        <button id="add-reasoner-model-btn" class="btn btn-primary">
                            <i class="bi bi-plus-circle"></i> 添加推理模型
                        </button>
                    </div>
                    <p class="text-muted mb-3">推理模型负责处理复杂的逻辑推理任务，如DeepSeek R1等模型。</p>
                    <!-- 推荐卡片 -->
                    <div class="card mb-4 border-primary border-opacity-25">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0 fs-5"><i class="bi bi-star me-1"></i> 推荐采用派欧云算力的最新 DeepSeek R1 0528</h5>
                        </div>
                        <div class="card-body">
                            <p class="mb-3">点击立即注册后，新用户可以获得 15 元的免费额度，再邀请还可以获得 30 元，流畅不卡顿</p>
                            <a href="https://ppio.cn/user/register?invited_by=TXTPQF" class="btn btn-primary" target="_blank">
                                <i class="bi bi-person-plus me-1"></i> 立即注册
                            </a>
                        </div>
                    </div>
                    <div id="reasoner-models-container" class="row">
                        <!-- 推理模型卡片将在这里动态生成 -->
                    </div>
                    <!-- 广告卡片 -->
                    <div class="card mb-4">
                        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">无需自己配置，可直接购买 API</h5>
                        </div>
                        <div class="card-body">
                            <p>支持最新 Claude 4  推理模型、DeepClaude、DeepGemini（目前社区反馈最好）、ChatGPT 系列模型等，支持知识库使用。</p>
                            <a href="https://erlich.fun/deepclaude-pricing" class="btn btn-primary">
                                <i class="bi bi-cart me-1"></i> 立即购买
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 目标模型配置 -->
            <div class="tab-pane fade" id="target-models">
                <div class="container">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h2 class="fs-4">目标模型配置</h2>
                        <button id="add-target-model-btn" class="btn btn-primary">
                            <i class="bi bi-plus-circle"></i> 添加目标模型
                        </button>
                    </div>
                    <p class="text-muted mb-3">目标模型是最终输出结果的模型，如Claude Sonnet 4 或Gemini 2.5 Pro等。</p>
                    <!-- 推荐卡片 -->
                    <!-- <div class="card mb-4">
                        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">推荐采用 DMXapi 的 Claude 3.7 Sonnet</h5>
                        </div>
                        <div class="card-body">
                            <p class="mb-3">点击立即注册后，新用户可以获得 2.5 元的免费额度，可用于 Claude 3.7 Sonnet，用户实际购买价格低于 Claude 官方</p>
                            <a href="https://www.dmxapi.cn/register?aff=w5Eo" class="btn btn-primary" target="_blank">
                                <i class="bi bi-person-plus me-1"></i> 立即注册
                            </a>
                        </div>
                    </div> -->
                    <div id="target-models-container" class="row">
                        <!-- 目标模型卡片将在这里动态生成 -->
                    </div>
                </div>
            </div>

            <!-- 代理设置 -->
            <div class="tab-pane fade" id="proxy-settings">
                <div class="container">
                    <h2 class="fs-4">代理设置</h2>
                    <p class="text-muted mb-3">如果您需要访问国际模型API，可能需要配置代理。</p>
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0 fs-5"><i class="bi bi-globe me-1"></i> 代理配置</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info mb-3">
                                <i class="bi bi-info-circle me-1"></i> 正确的代理设置可以帮助您更稳定地访问国际模型API
                            </div>
                            <form id="proxy-form">
                                <div class="mb-3 form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="proxy-open">
                                    <label class="form-check-label" for="proxy-open">启用代理</label>
                                    <div class="form-text mt-1">开启后，所有模型请求将通过此代理发送</div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">代理地址</label>
                                    <input type="text" class="form-control" id="proxy-address" placeholder="例如: 127.0.0.1:7890">
                                    <div class="form-text">通常为本地代理地址和端口，如127.0.0.1:7890</div>
                                </div>
                                <button type="button" class="btn btn-primary" id="save-proxy-btn">保存代理设置</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统设置 -->
            <div class="tab-pane fade" id="system-settings">
                <div class="container">
                    <h2 class="fs-4">系统设置</h2>
                    <p class="text-muted mb-3">配置系统级别的设置，包括API访问权限和日志级别等。</p>
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0 fs-5"><i class="bi bi-gear me-1"></i> 系统配置</h5>
                        </div>
                        <div class="card-body">
                            <form id="system-form">
                                <div class="mb-3">
                                    <label class="form-label">允许的源 (CORS)</label>
                                    <div class="form-text mb-2">设置允许访问API的域名，使用 * 表示允许所有域名访问</div>
                                    <div id="allow-origins-container">
                                        <div class="input-group mb-2">
                                            <input type="text" class="form-control allow-origin" placeholder="例如: * 或 http://localhost:3000">
                                            <button class="btn btn-outline-secondary remove-origin-btn" type="button">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="add-origin-btn">
                                        <i class="bi bi-plus"></i> 添加源
                                    </button>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">日志级别</label>
                                    <div class="form-text mb-2">设置系统日志的详细程度，DEBUG最详细，CRITICAL只记录严重错误</div>
                                    <select class="form-select" id="log-level">
                                        <option value="DEBUG">DEBUG - 详细调试信息</option>
                                        <option value="INFO">INFO - 一般信息</option>
                                        <option value="WARNING">WARNING - 警告信息</option>
                                        <option value="ERROR">ERROR - 错误信息</option>
                                        <option value="CRITICAL">CRITICAL - 严重错误</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">API Key</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="system-api-key" placeholder="设置 API Key">
                                        <!-- <button class="btn btn-outline-secondary" type="button" id="generate-api-key-btn">
                                            <i class="bi bi-key"></i> 生成随机密钥
                                        </button> -->
                                    </div>
                                    <div class="form-text mt-2">默认值为 123456，当你在 ChatBox 等聊天软件内使用时，填写的 api key 就是这个。如部署在云端，为保证安全请尽快修改。</div>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="save-deepseek-tokens">
                                        <label class="form-check-label" for="save-deepseek-tokens">节省 DeepSeek Tokens</label>
                                    </div>
                                    <div class="form-text">开启后将在使用原生推理模型时大幅节省输出 tokens，大幅降低输出成本。目前仅在火山引擎托管的 DeepSeek R1 上测试生效，欢迎补充。</div>
                                </div>
                                <div class="mb-3" id="deepseek-tokens-max-container">
                                    <label class="form-label">DeepSeek Tokens 最大限制</label>
                                    <input type="number" class="form-control" id="deepseek-tokens-max" min="1" max="1000" placeholder="5">
                                    <div class="form-text">设置节省 DeepSeek R1 输出 tokens 最大数量限制。由于我们只采用 DeepSeek R1 的推理部分，在支持输出结果的 max_tokens 参数的模型上，这个数值越小越好，为了保证更稳定的运行，推荐设置 5 即可。</div>
                                </div>
                                <button type="button" class="btn btn-primary" id="save-system-btn">保存系统设置</button>
                            </form>
                        </div>
                    </div>
                    <!-- 广告卡片 -->
                    <div class="card mb-4">
                        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">无需自己配置，可直接购买 API</h5>
                        </div>
                        <div class="card-body">
                            <p>支持最新 Claude 4 推理模型、DeepClaude、DeepGemini（目前社区反馈最好）、ChatGPT 系列模型等，支持知识库使用。</p>
                            <a href="https://erlich.fun/deepclaude-pricing" class="btn btn-primary">
                                <i class="bi bi-cart me-1"></i> 立即购买
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模板 -->
    <!-- 推理模型卡片模板 -->
    <template id="reasoner-model-template">
        <div class="col-md-6 mb-4 reasoner-model-card">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 model-name"></h5>
                    <div>
                        <button class="btn btn-sm btn-outline-primary edit-model-btn">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-danger delete-model-btn">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <form class="model-form">
                        <div class="mb-3">
                            <label class="form-label">模型 ID</label>
                            <input type="text" class="form-control model-id" placeholder="模型 ID">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">API Key</label>
                            <input type="password" class="form-control api-key" placeholder="API Key">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Base URL</label>
                            <input type="text" class="form-control api-base-url" placeholder="例如: https://api.example.com">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">API 请求地址</label>
                            <input type="text" class="form-control api-request-address" placeholder="例如: v1/chat/completions">
                        </div>
                        <div class="mb-3 form-check form-switch">
                            <input class="form-check-input is-origin-reasoning" type="checkbox">
                            <label class="form-check-label">是否原生支持推理</label>
                        </div>
                        <div class="mb-3 form-check form-switch">
                            <input class="form-check-input is-valid" type="checkbox">
                            <label class="form-check-label">模型可用</label>
                        </div>
                        <div class="mb-3 form-check form-switch">
                            <input class="form-check-input is-proxy-open" type="checkbox">
                            <label class="form-check-label">是否开启代理</label>
                        </div>
                        <button type="button" class="btn btn-primary save-model-btn">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </template>

    <!-- 目标模型卡片模板 -->
    <template id="target-model-template">
        <div class="col-md-6 mb-4 target-model-card">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 model-name"></h5>
                    <div>
                        <button class="btn btn-sm btn-outline-primary edit-model-btn">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-danger delete-model-btn">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <form class="model-form">
                        <div class="mb-3">
                            <label class="form-label">模型 ID</label>
                            <input type="text" class="form-control model-id" placeholder="模型 ID">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">API Key</label>
                            <input type="password" class="form-control api-key" placeholder="API Key">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Base URL</label>
                            <input type="text" class="form-control api-base-url" placeholder="例如: https://api.example.com">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">API 请求地址</label>
                            <input type="text" class="form-control api-request-address" placeholder="例如: v1/chat/completions">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">模型格式</label>
                            <select class="form-select model-format">
                                <option value="openai">OpenAI</option>
                                <option value="anthropic">Anthropic</option>
                            </select>
                        </div>
                        <div class="mb-3 form-check form-switch">
                            <input class="form-check-input is-valid" type="checkbox">
                            <label class="form-check-label">模型可用</label>
                        </div>
                        <div class="mb-3 form-check form-switch">
                            <input class="form-check-input is-proxy-open" type="checkbox">
                            <label class="form-check-label">是否开启代理</label>
                        </div>
                        <button type="button" class="btn btn-primary save-model-btn">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </template>

    <!-- 组合模型卡片模板 -->
    <template id="composite-model-template">
        <div class="col-md-6 mb-4 composite-model-card">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 model-name"></h5>
                    <div>
                        <button class="btn btn-sm btn-outline-primary edit-model-btn">
                            <i class="bi bi-pencil"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-danger delete-model-btn">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <form class="model-form">
                        <div class="mb-3">
                            <label class="form-label">模型 ID</label>
                            <input type="text" class="form-control model-id" placeholder="模型 ID">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">推理模型</label>
                            <select class="form-select reasoner-model-select">
                                <!-- 选项将动态生成 -->
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">目标模型</label>
                            <select class="form-select target-model-select">
                                <!-- 选项将动态生成 -->
                            </select>
                        </div>
                        <div class="mb-3 form-check form-switch">
                            <input class="form-check-input is-valid" type="checkbox">
                            <label class="form-check-label">模型可用</label>
                        </div>
                        <button type="button" class="btn btn-primary save-model-btn">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </template>

    <!-- 添加模型对话框 -->
    <div class="modal fade" id="add-model-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="add-model-title">添加模型</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="add-model-form">
                        <div class="mb-3">
                            <label for="new-model-name" class="form-label">模型名称</label>
                            <input type="text" class="form-control" id="new-model-name" placeholder="例如: Provider/Model-Name">
                        </div>
                        <div id="add-model-fields">
                            <!-- 动态生成的字段 -->
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirm-add-model">添加</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 确认删除对话框 -->
    <div class="modal fade" id="confirm-delete-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    确定要删除 <span id="delete-model-name"></span> 吗？此操作无法撤销。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirm-delete-btn">删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 导入配置对话框 -->
    <div class="modal fade" id="import-config-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="bi bi-upload me-2"></i>导入配置文件</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        请选择之前导出的配置文件（JSON格式）。导入后将覆盖当前所有配置。
                    </div>
                    <div class="mb-3">
                        <label for="config-file-input" class="form-label">选择配置文件</label>
                        <input type="file" class="form-control" id="config-file-input" accept=".json" />
                        <div class="form-text">支持 .json 格式的配置文件</div>
                    </div>
                    <div id="config-preview" class="d-none">
                        <label class="form-label">配置预览</label>
                        <div class="card bg-light">
                            <div class="card-body">
                                <div id="config-preview-content" style="max-height: 200px; overflow-y: auto;">
                                    <!-- 配置预览内容 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirm-import-btn" disabled>
                        <i class="bi bi-upload me-1"></i>导入配置
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 提示框 -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
        <div id="toast-container"></div>
    </div>

    <!-- 引入 Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义 JS -->
    <script src="./static/js/auth.js"></script>
    <script src="./static/js/config.js"></script>
    <script src="./static/js/main.js"></script>
    
    <style>
        /* 添加一些动画效果 */
        .animate-fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .auth-card {
            animation: slideDown 0.5s ease-out;
        }
        
        @keyframes slideDown {
            from { transform: translateY(-20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .btn {
            position: relative;
            overflow: hidden;
        }
        
        .btn:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }
        
        .btn:focus:not(:active)::after {
            animation: ripple 1s ease-out;
        }
        
        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }
    </style>

    <!-- Footer -->
    <footer class="bg-light text-center text-lg-start mt-5">
        <div class="container p-4">
            <div class="row">
                <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
                    <h5 class="">DeepClaude 开源项目</h5>
                    <p>
                        DeepClaude 是一个强大的组合模型使用方案，可以借助 DeepSeek R1 等推理模型强大的推理能力来提高像 Claude Sonnet 4 或 Gemini 2.5 Pro 等模型的能力。你可以借助当前的方案实现几乎任何推理模型+目标模型的配置！
                    </p>
                </div>
                <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
                    <h5 class="text-uppercase">相关链接</h5>
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2">
                            <a href="https://github.com/erlichliu/DeepClaude" class="text-primary text-decoration-none">
                                <i class="bi bi-github me-1"></i> GitHub 项目
                            </a>
                        </li>
                        <li>
                            <a href="https://erlich.fun/deepclaude-pricing" class="text-primary text-decoration-none">
                                <i class="bi bi-cart me-1"></i> 直接购买 API
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05);">
            2025 版权所有：
            <a class="text-dark text-decoration-none" href="#">DeepClaude</a>
        </div>
    </footer>
</body>
</html>
